<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工作台 - 线评测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary-color: #2ecc71;
            --primary-dark: #27ae60;
            --primary-light: #e8f5e9;
            --accent-color: #3498db;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --purple-color: #9b59b6;
            --success-color: #2ecc71;
            --text-color: #2c3e50;
            --text-color-light: #7f8c8d;
            --text-color-lighter: #95a5a6;
            --background-color: #f8f9fa;
            --card-background-color: #FFFFFF;
            --border-color: #ecf0f1;
            --shadow-color: rgba(0, 0, 0, 0.05);
            --shadow-hover: rgba(0, 0, 0, 0.1);
            --font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            --border-radius: 12px;
            --transition-speed: 0.3s;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--background-color);
            color: var(--text-color);
            padding: 0;
        }

        /* 主要内容区域样式 */
        .main-content {
            width: 100%;
            padding: 0;
            display: flex;
            flex-direction: column;
        }

        /* 内容区域样式 */
        .content-wrapper {
            padding: 30px 40px;
            flex: 1;
            overflow-y: auto;
            width: 100%;
            max-width: 100%;
            margin: 0;
        }

        .section-title {
            margin-bottom: 25px;
            font-weight: 600;
            font-size: 22px;
            color: var(--text-color);
            position: relative;
            padding-left: 15px;
            display: flex;
            align-items: center;
        }

        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            height: 25px;
            width: 5px;
            background: var(--primary-color);
            border-radius: 3px;
        }

        /* 布局调整：主区域和侧边栏 */
        .layout-row {
            display: flex;
            gap: 24px;
            margin-bottom: 35px;
        }

        .main-column {
            flex: 7;
        }

        .side-column {
            flex: 3;
            flex-shrink: 0;
        }

        /* 数据卡片布局 */
        .statistics-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
            margin-bottom: 35px;
        }

        .card {
            background: var(--card-background-color);
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: 0 4px 12px var(--shadow-color);
            border: none;
            transition: all var(--transition-speed);
            position: relative;
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px var(--shadow-hover);
        }

        .card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            opacity: 0;
            transition: opacity var(--transition-speed);
        }

        .card:hover::after {
            opacity: 1;
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .card-icon {
            width: 50px;
            height: 50px;
            border-radius: 15px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.2s;
        }

        .card:hover .card-icon {
            transform: scale(1.1);
        }

        .card-title {
            font-size: 15px;
            font-weight: 500;
            color: var(--text-color-light);
        }

        .card-content {
            padding-left: 65px;
        }

        .card-value {
            font-size: 32px;
            font-weight: 700;
            margin: 5px 0;
            color: var(--text-color);
            line-height: 1.2;
        }

        .card-content > div:last-child {
            color: var(--text-color-light);
            font-size: 14px;
        }

        /* 状态颜色 - 更新为更现代的调色板 */
        .status-pending-initial { background: linear-gradient(135deg, #ff9f43, #ff7e26); }
        .status-pending-expert { background: linear-gradient(135deg, #54a0ff, #2e86de); }
        .status-pending-final { background: linear-gradient(135deg, #a55eea, #8854d0); }
        .status-approved { background: linear-gradient(135deg, #20bf6b, #0fb95e); }
        .status-rejected { background: linear-gradient(135deg, #eb3b5a, #fc5c65); }
        .status-project { background: linear-gradient(135deg, #2bcbba, #0fb9b1); }

        /* 图表容器 */
        .chart-section {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 24px;
            margin-bottom: 35px;
        }

        .chart-container {
            background: var(--card-background-color);
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: 0 4px 12px var(--shadow-color);
            border: none;
            transition: all var(--transition-speed);
            display: flex;
            flex-direction: column;
        }
        
        .chart-container:hover {
            box-shadow: 0 8px 20px var(--shadow-hover);
        }
        
        .chart-container.combined {
            flex-direction: row;
            gap: 30px;
            align-items: stretch;
        }

        .chart-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            padding: 10px;
        }

        .chart-item:first-child {
            border-right: 1px solid var(--border-color);
            padding-right: 30px;
        }
        
        .chart-item:last-child {
            padding-left: 30px;
        }
        
        .chart-item-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 25px;
            text-align: center;
            width: 100%;
        }

        .chart-title {
            margin-bottom: 25px;
            font-weight: 600;
            font-size: 18px;
            color: var(--text-color);
            text-align: center;
        }

        canvas {
            width: 100% !important;
            max-height: 280px;
        }

        /* 动态提醒区域 */
        .notifications-container {
            background: var(--card-background-color);
            border-radius: var(--border-radius);
            box-shadow: 0 4px 12px var(--shadow-color);
            border: none;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: all var(--transition-speed);
        }

        .notifications-container:hover {
            box-shadow: 0 8px 20px var(--shadow-hover);
        }

        .notification-header {
            padding: 20px 25px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--primary-light);
        }

        .notification-title {
            font-weight: 600;
            font-size: 18px;
            color: var(--text-color);
            display: flex;
            align-items: center;
        }

        .notification-title::before {
            content: '\f0f3';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            margin-right: 10px;
            color: var(--primary-color);
            font-size: 16px;
        }

        .notification-action {
            color: var(--primary-color);
            font-size: 14px;
            cursor: pointer;
            font-weight: 500;
            padding: 6px 12px;
            border-radius: 20px;
            background-color: rgba(46, 204, 113, 0.1);
            transition: all 0.2s;
        }

        .notification-action:hover {
            background-color: rgba(46, 204, 113, 0.2);
        }

        .notification-list {
            list-style: none;
            overflow-y: auto;
            flex: 1;
        }

        .notification-item {
            padding: 18px 25px;
            border-bottom: 1px solid var(--border-color);
            position: relative;
            transition: all 0.2s;
            cursor: pointer;
        }

        .notification-item:hover {
            background-color: rgba(0, 0, 0, 0.01);
        }

        .notification-item.blue { border-left: 4px solid var(--accent-color); }
        .notification-item.green { border-left: 4px solid var(--success-color); }
        .notification-item.red { border-left: 4px solid var(--danger-color); }
        .notification-item.orange { border-left: 4px solid var(--warning-color); }

        .notification-content {
            margin-left: 5px;
        }

        .notification-item-title {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 8px;
            color: var(--text-color);
        }

        .notification-message {
            color: var(--text-color-light);
            font-size: 14px;
            margin-bottom: 10px;
            line-height: 1.6;
        }

        .notification-time {
            color: var(--text-color-lighter);
            font-size: 12px;
            display: flex;
            align-items: center;
        }

        .notification-time i {
            margin-right: 5px;
            font-size: 12px;
            opacity: 0.8;
        }

        /* 项目列表样式 */
        .projects-container {
            background: var(--card-background-color);
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: 0 4px 12px var(--shadow-color);
            border: none;
            transition: all var(--transition-speed);
            overflow: hidden;
        }

        .projects-container:hover {
            box-shadow: 0 8px 20px var(--shadow-hover);
        }

        .project-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .project-table th {
            padding: 16px;
            text-align: left;
            background-color: var(--primary-light);
            font-weight: 600;
            color: var(--text-color);
            font-size: 15px;
            position: relative;
        }

        .project-table th:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        .project-table th:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .project-table td {
            padding: 16px;
            border-bottom: 1px solid var(--border-color);
            font-size: 14px;
        }

        .project-table tbody tr {
            transition: all 0.2s;
            cursor: pointer;
        }
        
        .project-table tbody tr:hover {
            background-color: rgba(46, 204, 113, 0.05);
        }
        
        .project-table tr:last-child td {
            border-bottom: none;
        }

        .project-status {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            color: #fff;
            display: inline-block;
            font-weight: 500;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .project-type {
            color: var(--text-color-light);
            background-color: #f8f9fa;
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 12px;
            border: 1px solid var(--border-color);
        }

        /* 响应式调整 */
        @media (max-width: 1200px) {
            .layout-row {
                flex-direction: column;
            }
            
            .chart-section {
                grid-template-columns: 1fr;
            }
            
            .chart-container.combined {
                flex-direction: column;
            }
            
            .chart-item:first-child {
                border-right: none;
                border-bottom: 1px solid var(--border-color);
                padding-right: 0;
                padding-bottom: 20px;
                margin-bottom: 20px;
            }
            
            .chart-item:last-child {
                padding-left: 0;
                padding-top: 20px;
            }
        }
        
        @media (max-width: 768px) {
            .content-wrapper {
                padding: 20px;
            }
            
            .statistics-cards {
                grid-template-columns: 1fr;
            }
            
            .project-table {
                display: block;
                overflow-x: auto;
            }
        }

        /* 欢迎区域样式 */
        .welcome-section {
            margin-bottom: 30px;
        }

        .welcome-container {
            background: var(--card-background-color);
            border-radius: var(--border-radius);
            padding: 30px;
            display: flex;
            box-shadow: 0 4px 12px var(--shadow-color);
            position: relative;
            overflow: hidden;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9)), 
                              url('https://images.unsplash.com/photo-1530973428-5bf2db2e4d71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
        }

        .welcome-content {
            flex: 1;
            z-index: 1;
        }

        .welcome-title {
            font-size: 28px;
            font-weight: 700;
            color: var(--text-color);
            margin-bottom: 15px;
        }

        .welcome-text {
            font-size: 16px;
            color: var(--text-color-light);
            margin-bottom: 25px;
            line-height: 1.6;
        }

        .accent-text {
            color: var(--primary-color);
            font-weight: 700;
        }

        .welcome-image {
            width: 200px;
            height: 200px;
            margin-left: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .welcome-image img {
            max-width: 100%;
            max-height: 100%;
            border-radius: 10px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

        .action-buttons {
            display: flex;
            gap: 15px;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
            border: none;
        }

        .primary-btn {
            background-color: var(--primary-color);
            color: white;
            box-shadow: 0 4px 10px rgba(46, 204, 113, 0.2);
        }

        .primary-btn:hover {
            background-color: var(--primary-dark);
            box-shadow: 0 6px 15px rgba(46, 204, 113, 0.3);
            transform: translateY(-2px);
        }

        .outline-btn {
            background-color: transparent;
            color: var(--text-color);
            border: 1px solid var(--border-color);
        }

        .outline-btn:hover {
            background-color: rgba(0,0,0,0.02);
            border-color: var(--text-color-light);
            transform: translateY(-2px);
        }

        /* 概览卡片样式 */
        .overview-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 35px;
        }

        .overview-card {
            background: var(--card-background-color);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: 0 4px 12px var(--shadow-color);
            display: flex;
            flex-direction: column;
            transition: all var(--transition-speed);
        }

        .overview-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px var(--shadow-hover);
        }

        .overview-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-bottom: 15px;
            box-shadow: 0 5px 15px rgba(46, 204, 113, 0.2);
        }

        .overview-details {
            margin-bottom: 15px;
        }

        .overview-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--text-color);
            display: block;
            margin-bottom: 5px;
        }

        .overview-label {
            font-size: 14px;
            color: var(--text-color-light);
        }

        .overview-progress {
            margin-top: auto;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .progress-bar {
            flex: 1;
            height: 6px;
            background-color: #f2f2f2;
            border-radius: 10px;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background-color: var(--primary-color);
            border-radius: 10px;
        }

        .progress-text {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-color-light);
        }

        @media (max-width: 1200px) {
            .overview-cards {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .welcome-container {
                flex-direction: column;
            }
            
            .welcome-image {
                margin-left: 0;
                margin-top: 20px;
                align-self: center;
            }
            
            .overview-cards {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <!-- 主要内容区域 -->
    <main class="main-content">
        <div class="content-wrapper">
            <!-- 顶部欢迎区域 -->
            <div class="welcome-section">
                <div class="welcome-container">
                    <div class="welcome-content">
                        <h1 class="welcome-title">欢迎使用项目管理系统</h1>
                        <p class="welcome-text">今天是 <span id="current-date"></span>，您有 <span class="accent-text">8</span> 个待处理的任务和 <span class="accent-text">3</span> 个重要通知。</p>
                        <div class="action-buttons">
                            <button class="btn primary-btn"><i class="fas fa-plus-circle"></i> 新建项目</button>
                            <button class="btn outline-btn"><i class="fas fa-chart-line"></i> 查看报表</button>
                        </div>
                    </div>
                    <div class="welcome-image">
                        <img src="https://cdn.jsdelivr.net/gh/akabab/superhero-api@0.3.0/api/images/sm/346-iron-man.jpg" alt="欢迎图片">
                    </div>
                </div>
            </div>

            <!-- 概览卡片 -->
            <div class="overview-cards">
                <div class="overview-card">
                    <div class="overview-icon">
                        <i class="fas fa-tasks"></i>
                    </div>
                    <div class="overview-details">
                        <span class="overview-value">75</span>
                        <span class="overview-label">进行中的项目</span>
                    </div>
                    <div class="overview-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 75%;"></div>
                        </div>
                        <span class="progress-text">75%</span>
                    </div>
                </div>
                <div class="overview-card">
                    <div class="overview-icon" style="background-color: var(--warning-color);">
                        <i class="fas fa-clipboard-list"></i>
                    </div>
                    <div class="overview-details">
                        <span class="overview-value">48</span>
                        <span class="overview-label">等待审批</span>
                    </div>
                    <div class="overview-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 48%; background-color: var(--warning-color);"></div>
                        </div>
                        <span class="progress-text">48%</span>
                    </div>
                </div>
                <div class="overview-card">
                    <div class="overview-icon" style="background-color: var(--success-color);">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="overview-details">
                        <span class="overview-value">62</span>
                        <span class="overview-label">已完成项目</span>
                    </div>
                    <div class="overview-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 62%; background-color: var(--success-color);"></div>
                        </div>
                        <span class="progress-text">62%</span>
                    </div>
                </div>
                <div class="overview-card">
                    <div class="overview-icon" style="background-color: var(--accent-color);">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="overview-details">
                        <span class="overview-value">35</span>
                        <span class="overview-label">活跃用户</span>
                    </div>
                    <div class="overview-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 35%; background-color: var(--accent-color);"></div>
                        </div>
                        <span class="progress-text">35%</span>
                    </div>
                </div>
            </div>

            <!-- 项目申报状态统计和动态提醒并排显示 -->
            <div class="layout-row">
                <div class="main-column">
                    <h2 class="section-title">项目申报状态统计</h2>

                    <!-- 状态统计卡片 -->
                    <div class="statistics-cards">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-icon status-pending-initial">
                                    <i class="fas fa-hourglass-start"></i>
                                </div>
                                <div class="card-title">待初审</div>
                            </div>
                            <div class="card-content">
                                <div class="card-value">18</div>
                                <div>项目需要初审</div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <div class="card-icon status-pending-expert">
                                    <i class="fas fa-user-check"></i>
                                </div>
                                <div class="card-title">待专家审</div>
                            </div>
                            <div class="card-content">
                                <div class="card-value">12</div>
                                <div>等待专家评审</div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <div class="card-icon status-pending-final">
                                    <i class="fas fa-clipboard-check"></i>
                                </div>
                                <div class="card-title">待终审</div>
                            </div>
                            <div class="card-content">
                                <div class="card-value">5</div>
                                <div>等待最终评审</div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <div class="card-icon status-approved">
                                    <i class="fas fa-check"></i>
                                </div>
                                <div class="card-title">已通过</div>
                            </div>
                            <div class="card-content">
                                <div class="card-value">32</div>
                                <div>已完成申报</div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <div class="card-icon status-rejected">
                                    <i class="fas fa-times"></i>
                                </div>
                                <div class="card-title">未通过</div>
                            </div>
                            <div class="card-content">
                                <div class="card-value">8</div>
                                <div>申报未通过</div>
                            </div>
                        </div>
                    </div>

                    <h2 class="section-title">项目招标管理状态统计</h2>

                    <!-- 招标管理统计卡片 -->
                    <div class="statistics-cards">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-icon status-project" style="background-color: #1890ff;">
                                    <i class="fas fa-flag"></i>
                                </div>
                                <div class="card-title">已立项</div>
                            </div>
                            <div class="card-content">
                                <div class="card-value">24</div>
                                <div>项目已确立</div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <div class="card-icon status-project" style="background-color: #faad14;">
                                    <i class="fas fa-gavel"></i>
                                </div>
                                <div class="card-title">招采</div>
                            </div>
                            <div class="card-content">
                                <div class="card-value">15</div>
                                <div>招标采购中</div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <div class="card-icon status-project" style="background-color: #722ed1;">
                                    <i class="fas fa-cogs"></i>
                                </div>
                                <div class="card-title">项目执行</div>
                            </div>
                            <div class="card-content">
                                <div class="card-value">18</div>
                                <div>执行进行中</div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <div class="card-icon status-project" style="background-color: #13c2c2;">
                                    <i class="fas fa-clipboard-list"></i>
                                </div>
                                <div class="card-title">验收</div>
                            </div>
                            <div class="card-content">
                                <div class="card-value">6</div>
                                <div>验收评估中</div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <div class="card-icon status-project" style="background-color: #52c41a;">
                                    <i class="fas fa-archive"></i>
                                </div>
                                <div class="card-title">已归档</div>
                            </div>
                            <div class="card-content">
                                <div class="card-value">28</div>
                                <div>完成并归档</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 动态提醒侧边栏 -->
                <div class="side-column">
                    <div class="notifications-container">
                        <div class="notification-header">
                            <div class="notification-title">动态提醒</div>
                            <div class="notification-action">全部标为已读</div>
                        </div>
                        <ul class="notification-list">
                            <li class="notification-item blue">
                                <div class="notification-content">
                                    <div class="notification-item-title">项目状态已更新</div>
                                    <div class="notification-message">项目"智慧校园管理系统"已通过初审，进入专家评审阶段。</div>
                                    <div class="notification-time">
                                        <i class="far fa-clock"></i>
                                        2023-06-15 10:25
                                    </div>
                                </div>
                            </li>
                            <li class="notification-item green">
                                <div class="notification-content">
                                    <div class="notification-item-title">项目评审通过</div>
                                    <div class="notification-message">项目"5G校园网络升级"已通过所有评审人的评审，评审结果为通过。</div>
                                    <div class="notification-time">
                                        <i class="far fa-clock"></i>
                                        2023-06-14 16:30
                                    </div>
                                </div>
                            </li>
                            <li class="notification-item red">
                                <div class="notification-content">
                                    <div class="notification-item-title">项目评审未通过</div>
                                    <div class="notification-message">项目"教学实验室设备采购"未通过专家评审，请查看评审意见并修改。</div>
                                    <div class="notification-time">
                                        <i class="far fa-clock"></i>
                                        2023-06-14 09:45
                                    </div>
                                </div>
                            </li>
                            <li class="notification-item orange">
                                <div class="notification-content">
                                    <div class="notification-item-title">新项目申报提交</div>
                                    <div class="notification-message">李明提交了新项目"人工智能教学平台"，等待初审。</div>
                                    <div class="notification-time">
                                        <i class="far fa-clock"></i>
                                        2023-06-13 14:20
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 图表分析 -->
            <h2 class="section-title">图表分析</h2>
            <div class="chart-section">
                <div class="chart-container combined">
                    <div class="chart-item">
                        <h3 class="chart-item-title">项目类型分布</h3>
                    <canvas id="projectTypeChart"></canvas>
                    </div>
                    <div class="chart-item">
                        <h3 class="chart-item-title">投资估算</h3>
                        <div id="investmentChartContainer" style="position: relative; width: 100%; height: 100%;">
                            <canvas id="investmentChart"></canvas>
                        </div>
                    </div>
                </div>
                <div class="chart-container">
                    <h3 class="chart-title">项目评审通过率</h3>
                    <canvas id="reviewPassRateChart"></canvas>
                </div>
            </div>

            <!-- 最近项目 -->
            <h2 class="section-title">最近项目</h2>
            <div class="projects-container">
                <table class="project-table">
                    <thead>
                        <tr>
                            <th>项目名称</th>
                            <th>项目类型</th>
                            <th>申报人</th>
                            <th>当前状态</th>
                            <th>申报日期</th>
                            <th>评审人数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>智慧校园管理系统</td>
                            <td><span class="project-type">软件类</span></td>
                            <td>张三</td>
                            <td><span class="project-status status-pending-expert">待专家审</span></td>
                            <td>2023-06-10</td>
                            <td>3/5</td>
                        </tr>
                        <tr>
                            <td>5G校园网络升级</td>
                            <td><span class="project-type">硬件类</span></td>
                            <td>李四</td>
                            <td><span class="project-status status-approved">已通过</span></td>
                            <td>2023-06-05</td>
                            <td>5/5</td>
                        </tr>
                        <tr>
                            <td>教学实验室设备采购</td>
                            <td><span class="project-type">硬件类</span></td>
                            <td>王五</td>
                            <td><span class="project-status status-rejected">未通过</span></td>
                            <td>2023-06-01</td>
                            <td>2/4</td>
                        </tr>
                        <tr>
                            <td>校园安全监控系统</td>
                            <td><span class="project-type">工程类</span></td>
                            <td>赵六</td>
                            <td><span class="project-status status-pending-final">待终审</span></td>
                            <td>2023-05-28</td>
                            <td>4/4</td>
                        </tr>
                        <tr>
                            <td>学生活动中心装修</td>
                            <td><span class="project-type">工程类</span></td>
                            <td>孙七</td>
                            <td><span class="project-status status-pending-initial">待初审</span></td>
                            <td>2023-05-25</td>
                            <td>0/3</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>

    <script>
        // 显示当前日期
        function displayCurrentDate() {
            const now = new Date();
            const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            const dateString = now.toLocaleDateString('zh-CN', options);
            document.getElementById('current-date').textContent = dateString;
        }

        // 按钮点击事件
        function setupButtonEvents() {
            const primaryBtn = document.querySelector('.primary-btn');
            const outlineBtn = document.querySelector('.outline-btn');
            
            if (primaryBtn) {
                primaryBtn.addEventListener('click', function() {
                    alert('即将开始创建新项目');
                });
            }
            
            if (outlineBtn) {
                outlineBtn.addEventListener('click', function() {
                    alert('正在打开报表页面');
                });
            }
        }
        
        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            displayCurrentDate();
            setupButtonEvents();
            addInvestmentCenterText();
        });

        // 全部标为已读功能
        document.querySelector('.notification-action').addEventListener('click', function () {
            // 这里可以添加标记已读的逻辑
            alert('所有通知已标记为已读');
        });

        // 绘制项目类型分布图
        const typeCtx = document.getElementById('projectTypeChart').getContext('2d');
        const typeChart = new Chart(typeCtx, {
            type: 'pie',
            data: {
                labels: ['软件类', '硬件类', '工程类', '其它'],
                datasets: [{
                    data: [35, 25, 30, 10],
                    backgroundColor: [
                        '#1890ff',
                        '#52c41a',
                        '#722ed1',
                        '#faad14'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                        labels: {
                            boxWidth: 15,
                            padding: 15
                        }
                    }
                }
            }
        });

        // 绘制评审通过率图表
        const rateCtx = document.getElementById('reviewPassRateChart').getContext('2d');
        const rateChart = new Chart(rateCtx, {
            type: 'bar',
            data: {
                labels: ['初审', '专家审', '终审', '总体'],
                datasets: [{
                    label: '通过率',
                    data: [85, 75, 90, 80],
                    backgroundColor: [
                        '#faad14',
                        '#1890ff',
                        '#722ed1',
                        '#52c41a'
                    ],
                    borderWidth: 0,
                    barPercentage: 0.3,
                    categoryPercentage: 0.7
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        grid: {
                            drawBorder: false,
                        },
                        ticks: {
                            padding: 10,
                            callback: function (value) {
                                return value + '%';
                            }
                        }
                    },
                    x: {
                         grid: {
                            display: false,
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });

        // 绘制投资估算图表
        const investCtx = document.getElementById('investmentChart').getContext('2d');
        const investData = {
            labels: ['小于10万', '10-30万', '大于30万'],
            datasets: [{
                data: [15, 25, 10],
                backgroundColor: [
                    '#4e73df',
                    '#f56565',
                    '#f6ad55'
                ],
                borderWidth: 0
            }]
        };

        const investmentChart = new Chart(investCtx, {
            type: 'doughnut',
            data: investData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12,
                            padding: 20,
                            usePointStyle: true,
                            pointStyle: 'circle',
                            font: {
                                size: 13
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function (context) {
                                const label = context.label || '';
                                const value = context.formattedValue;
                                return `${label}: ${value}个项目`;
                            }
                        }
                    }
                }
            }
        });

        // 添加投资估算中心文本
        function addInvestmentCenterText() {
            const chartContainer = document.getElementById('investmentChartContainer');

            // 清除可能存在的旧元素
            const oldText = chartContainer.querySelector('.center-text');
            if (oldText) oldText.remove();

            // 创建中心文本元素
            const centerText = document.createElement('div');
            centerText.classList.add('center-text');
            centerText.style.position = 'absolute';
            centerText.style.top = '50%';
            centerText.style.left = '50%';
            centerText.style.transform = 'translate(-50%, -50%)';
            centerText.style.textAlign = 'center';
            centerText.style.pointerEvents = 'none';

            // 添加文本内容
            centerText.innerHTML = `
                <div style="font-size: 14px; color: #666;">投资估算</div>
                <div style="font-size: 20px; font-weight: bold; margin-top: 5px; color: #172B4D;">50个</div>
                <div style="font-size: 12px; color: #666; margin-top: 2px;">项目总计</div>
            `;

            // 添加到容器
            chartContainer.appendChild(centerText);
        }

        // 页面加载完成后添加中心文本
        window.addEventListener('load', addInvestmentCenterText);
        // 当窗口大小改变时重新调整位置
        window.addEventListener('resize', addInvestmentCenterText);
    </script>
</body>

</html>